<template>
	<view>
		<view class="hade">
			工头网 | 一站式外包平台
		</view>
		<view class="inputs">
			<view class="input" @click="gosearch">
				<image src="../../static/icon/search.png" mode="widthFix"></image>
				<text>搜索您想要的队伍</text>
			</view>
		</view>
		<swiper :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(list,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image class="swiperimg" :src="list.image" @tap="toUrl(list.pic_path)" mode="widthFix"></image>
				</view>
			</swiper-item>

		</swiper>
		<view class="icons">
			<view class="iconsall" v-for="(list,index) in iconslist" :key="index" @click="gorecom(list)">
				<image :src="list.image" mode="widthFix"></image>
				<view class="">
					{{list.ad_name}}
				</view>
			</view>

		</view>

		<view class="shaixuan" v-if="user.group_id == 2">
			<view class="left">
				<view class="" @click="tab(1)" :class="{click:tabindex == 1}">
					最新
				</view>
				<view class="" @click="tab(2)" :class="{click:tabindex == 2}">
					综合
				</view>
			</view>
			<view class="">
				<view class="typeselet">
					<picker @change="bindPickertype2" :value="typeInd2" @cancel="close" range-key="label" :range="list">
						<text>{{duiwu}}</text>
						<image src="../../static/icon/down2.png" mode=""></image>
					</picker>
				</view>
				<view class="typeselet" @click="typesele">
					{{numtext}} <text class="dat" v-if="num != 1"> <text v-if="num > 1">·</text> {{num}}</text>
					<image src="../../static/icon/down2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="shaixuan" v-if="user.group_id == 3">
			<view class="">

				<!-- <image src="" mode=""></image> -->
				<picker @change="bindPickertype2" @cancel="close" :value="typeInd2" range-key="label" :range="list">
					{{banzu}}<text style="margin-top: 8rpx; font-size: 20rpx;">﹀</text>
				</picker>
			</view>
			<view class="" @click="typesele">
				{{numtext}} <text class="dat" v-if="num != 1"> <text v-if="num > 1">·</text> {{num}}</text>
				<text style="margin-top: 8rpx; font-size: 20rpx;">﹀</text>
			</view>
			<view class="" @click="goarea">
				{{arer}}<text style="margin-top: 8rpx; font-size: 20rpx;">﹀</text>
			</view>
			<view class="zonghe">
				<text @click="showcl">{{zonghe}}<text style="margin-top: 8rpx; font-size: 20rpx;">﹀</text></text>
				<view class="shows" v-if="shows">
					<view class="" @click="tab(1)">
						综合
					</view>
					<view class="" @click="tab(2)">
						最新
					</view>
				</view>
			</view>
		</view>
		<view class="item_list" v-if="itemlist.length > 0">
			<view class="list" @click.stop="goteam(item.id)" v-for="(item,index) in itemlist" :key="index">
				<view class="list_top">
					<!-- <view class="no_z flex align" v-if="item.user.is_verify == 0 && user.group_id == 2">
						<image class="identIcon" src="../../static/icon/icon/my/renzheng.png" mode="aspectFill"></image>
						<text>未认证</text>
					</view> -->
					<view class="renzheng flex align" v-if="item.user.is_verify == 1 && user.group_id == 2">
						<image class="identIcon" src="../../static/icon/icon/home/renzheng.png" mode="aspectFill">
						</image>
						<text>已认证</text>
					</view>
					<view class="ipone" @tap.stop="toCall(item.phone)" v-if="user.group_id == 2">
						<image src="../../static/icon/tel.png" mode="widthFix"></image>
					</view>
					<image :src="item.user.avatar" mode="widthFix" v-if="user.group_id == 2"></image>
					<view class="list_title">
						<view class="title_name" v-if="user.group_id == 2">
							{{item.name}}-{{item.user.encoded}}
						</view>
						<view class="title_name" v-if="user.group_id == 3">
							{{item.introduce}}
						</view>
						<!-- <view class="title_dizhi flex align" v-if="user.group_id == 2">
							<image src="../../static/icon/addr.png" mode="aspectFill"></image>
							<text>{{item.province}}</text>
						</view> -->
					</view>
				</view>
				<view class="list_bottom">
					<view class="bottom_list">
						<view class="bottom_lists btn-bg" v-for="(items,index) in item.troops_arr"
							v-if="user.group_id == 2">
							{{items}}
						</view>
						<view class="bottom_lists bottom_lists2" v-for="(items,index) in item.work_arr"
							v-if="user.group_id == 2">
							{{items}}
						</view>
						<text v-if="user.group_id != 2">需求：</text>
						<view class="blue" v-for="(items,index) in item.troops_arr" v-if="user.group_id!= 2">
							{{items}}
						</view>
						<view class="" v-for="(items,index) in item.work_arr" v-if="user.group_id!= 2">
							| {{items}}
						</view>
						<view class="ipone" @tap.stop="toCall(item.phone)">
							<image src="../../static/icon/tel.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="bottom_content" v-if="user.group_id != 2">
						{{item.user.encoded}} {{timestampToTime(item.createtime)}} 发布
						<view class="title_dizhi flex align">
							<image src="../../static/icon/addr.png" mode="aspectFill"></image>
							<text>{{item.province}}</text>
						</view>
					</view>
					<view class="bottom_content" v-if="user.group_id == 2">
						{{item.introduce}}

					</view>
				</view>
			</view>

		</view>
		<view class="mengceng" v-if="isshow">
			<view class="mengcengcontent">
				<view class="alltitle">
					请选择您的身份
				</view>
				<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<view class="names" @click="shows()">
						<view class="titles">
							我是项目方 >
						</view>
						<view class="contents">
							发布工程项目、寻找施工队伍
						</view>
					</view>
				</button>
				<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber2">
					<view class="names">
						<!-- <picker @change="bindPickertype" :value="typeInd" :range="list"> -->
						<view class="titles">
							我是接包方 >
						</view>
						<view class="contents">
							劳务班主、专业分包、技术团队
							寻找、承接工程找项目
						</view>
						<!-- </picker> -->

					</view>
				</button>

			</view>
			<view class="select_type" v-if="isType">
				<view class="select_type_list">
					<view class="title">
						请选择您的身份
					</view>
					<view class="btn flex justify align">
						<view class="" @tap="isType = false">
							取消
						</view>
						<view class="active" @tap="setUser('3')">
							确定
						</view>
					</view>
					<view :class="['select_type_item', typeInd == item.value?'select_type_active':'']"
						v-for="(item,index) in list" :key="index" @tap="changetypeInd(item.value)">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<view class="Add_btn" @tap="toAdd" v-if="user.group_id == 2">
			<image src="../../static/icon/add.png" mode=""></image>
			<view class="">
				发布项目
			</view>
		</view>
		<m-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm"></m-picker>
		<view-tabbar selected="0"></view-tabbar>
	</view>
</template>

<script>
	import mPicker from '@/components/m-picker/m-picker.vue';
	import common from "../../static/js/common.js"
	const app = getApp()
	export default {
		data() {
			return {
				num: '',
				pageIndex: 1,
				isType: false,
				typeInd: 200, //身份选择
				typeInd2: -1,
				tabindex: 1,
				userid: '',
				user: [],
				uids: '',
				isshow: false,
				show: true,
				numtext: '工种',
				value: '',
				shows: false,
				zonghe: '综合',
				isshow: false,
				arer: '北京',
				swiperList: [],
				iconslist: [],
				itemlist: [],
				list: [{
						label: '劳务班组',
						value: 200
					},
					{
						label: '专业分包',
						value: 201
					},
					{
						label: '技术团队',
						value: 202
					}
				], //接包方队伍分类
				// 省
				provinceData: [],
				// 市
				cityData: [],
				newCity: [],
				banzu: '队伍类型',
				duiwu: '队伍类型',
				// 区
				areaData: [],
				newArea: [],
				cityShow: false,
				areaShow: false
			}
		},
		onLoad() {
			this.getswiper()
			this.geticons()

		},
		onShow() {
			var _this = this
			this.num = ''
			this.itemlist = []
			this.pageIndex = 1
			uni.getStorage({
				key: 'work_name',
				success: function(res) {
					console.log(res.data, '缓存--------------------');
					_this.uids = res.data[0].uId
					_this.num = res.data.length
					if (res.data.length == 1) {
						_this.numtext = res.data[0].sel
					} else {
						_this.numtext = '工种'
					}
					console.log(res.data[0].uId, '11111111111111111111111111111111111111111111')
				}
			});
			setTimeout(() => {
				uni.removeStorage({
					key: 'work_name',
					success: function(res) {
						console.log('success');
					}
				});

			}, 500)


			if (app.globalData.areas != undefined) {
				this.arer = app.globalData.areas[0].label
			}

			if (app.globalData.user) {
				_this.user = app.globalData.user

				if (_this.user.group_id == 1) {
					_this.isshow = true
				} else {
					_this.isshow = false
				}
				_this.getitemlist('new', '')
			} else {
				var _this = this
				app.flagLogin().then(() => {
					console.log('回调2---------------', app.globalData.user)
					_this.user = app.globalData.user
					console.log(_this.user, '---------------------------------------------------')
					_this.getitemlist('new', '')
					if (_this.user.group_id == 1) {
						_this.isshow = true
					} else {
						_this.isshow = false
					}
				})
			}


		},

		methods: {
			close() {
				this.getitemlist('new', '')
				this.banzu = '队伍类型'
				this.typeInd2 = -1
				this.duiwu = '队伍类型'
			},
			showcl() {
				this.shows = true
			},
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear();
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return M + '月' + D + '日'
				// console.log(Y + M + D + h + m + s)
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			toAdd() {
				if (this.user.group_id == 2) {
					uni.navigateTo({
						url: '/pages/publishProject/publishProject'
					})
				}
				if (this.user.group_id == 3) {
					uni.navigateTo({
						url: '/pages/businessCard/businessCard'
					})
				}
			},
			gosearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			changetypeInd(value) {
				this.typeInd = value
			},
			open() {
				this.show = true
			},
			getswiper() {
				let url = '/addons/shopro/banner/index'
				app.getData(url, {}).then(res => {
					this.swiperList = res.data.data.data
				})

			},

			geticons() {
				let url = '/addons/shopro/tabbar/index'
				app.getData(url, {}).then(res => {
					this.iconslist = res.data.data.data
				})
			},
			getitemlist(order_by, xiangmu) {
				console.log('===================')
				let url;
				let data;
				if (this.user.group_id == 2) {
					url = 'addons/shopro/visiting_card/index'
					data = {
						"page": this.pageIndex,
						"num": 10,
						"order_by": order_by,
						"work_ids": this.uids,
						'troops_ids': xiangmu == 0 ? '200' : xiangmu == 1 ? '201' : xiangmu == 2 ? '202' : '',
						"province": this.arer
					}
				} else if (this.user.group_id == 3) {
					url = 'addons/shopro/project/index'
					data = {
						"page": this.pageIndex,
						"num": 10,
						"order_by": order_by,
						'troops_ids': xiangmu,
						"work_ids": this.uids,
						"province": this.arer
					}
				}

				if (url) {
					app.getData(url, data).then(res => {
						this.itemlist = [...this.itemlist, ...res.data.data.data]

						// this.iconslist = res.data.data.data
					})
				}
			},
			typesele() {
				uni.navigateTo({
					url: '/pages/typeSelection/typeSelection'
				})
			},
			goteam(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/TeamDetails/TeamDetails?id=' + id
				})
			},
			tab(index) {
				this.tabindex = index
				this.itemlist = []
				this.pageIndex = 1
				if (index == 1) {
					this.zonghe = '综合'
					this.shows = false

					this.getitemlist('new', '')
				} else {
					this.getitemlist('allround', '')
					this.zonghe = '最新'
					this.shows = false
				}
			},
			decryptPhoneNumber(e) {
				console.log('e', e)
				// this.isshow = false
				uni.login({
					success: res => {
						app.postFormData('addons/shopro/user/wxMiniProgramPhone', {
							code: res.code,
							phoneEncryptedData: e.detail.encryptedData,
							phoneIv: e.detail.iv
						}).then(res1 => {
							console.log('-------', res1)
							this.setUser('2')
						})
					}
				})
			},
			decryptPhoneNumber2(e) {
				uni.login({
					success: res => {
						app.postFormData('addons/shopro/user/wxMiniProgramPhone', {
							code: res.code,
							phoneEncryptedData: e.detail.encryptedData,
							phoneIv: e.detail.iv
						}).then(res1 => {
							console.log('-------', res1)
							this.isType = true
						})
					}
				})
			},
			setUser(group_id) {
				const that = this
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: app.globalData.IP + 'addons/shopro/user/changeRole',
					data: {
						group_id: group_id,
						troops_id: this.typeInd ? this.typeInd : ''
					},
					header: {
						token: app.globalData.token
					},
					method: 'POST',
					success: res => {
						uni.hideLoading()
						that.isshow = false
						that.isType = false
						app.globalData.user.group_id = group_id
						app.globalData.user.troops_id = that.typeInd ? that.typeInd : ''
					},
					fail: err => {
						reject(err)
						console.log('发送数据失败')
					}
				})
				// app.postData('addons/shopro/user/changeRole',{
				// 	group_id: group_id,
				// 	troops_id: this.typeInd? this.typeInd: ''
				// }).then(res1=>{
				// 	uni.hideLoading()
				// 	console.log('-------',res1)
				// 	this.isShow = false
				// 	this.isType = false
				// 	app.globalData.user.group_id = group_id
				// 	app.globalData.user.troops_id = this.typeInd? this.typeInd: ''
				// })
			},
			bindPickertype2(e) {
				console.log(e)
				this.itemlist = []
				this.pageIndex = 1
				this.typeInd2 = e.detail.value
				this.getitemlist('new', this.typeInd2)
				this.banzu = this.list[e.detail.value].label
				this.duiwu = this.list[e.detail.value].label
			},
			bindChange(e) {
				console.log(e)
			},
			confirm(e) {
				console.log(e)
			},
			gorecom(item) {
				uni.navigateTo({
					url: item.pic_path
				})
			},
			// 拨打电话
			toCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			goarea() {
				uni.redirectTo({
					url: '/pages/area/area'
				})
			},
			// 省市区
			province(id, index) {
				console.log(id)
				var city = this.cityData
				var cityPid = []
				city.forEach(item => {
					// console.log(item)
					var cityItem = item
					cityItem.forEach(item => {
						// console.log(item)
						if (id == item.pid) {
							// console.log(item)
							cityPid.push(item)
						}
					})
				})
				this.newCity = cityPid
				console.log(this.newCity, '这个是获取的城市')
				this.cityShow = true
				this.areaShow = false
			},
			citys(id) {
				console.log(id)
				var area = this.areaData
				var areaPid = []
				area.forEach(item => {
					// console.log(item)
					var areaItem = item
					areaItem.forEach(item => {
						// console.log(item,'第二次循环')
						var areaTwo = item
						areaTwo.forEach(item => {
							// console.log(item,'第三次循环')
							if (id == item.pid) {
								// console.log(item,'这是获取的区')
								areaPid.push(item)
							}
						})

					})
				})
				this.newArea = areaPid
				this.areaShow = true
				console.log(this.newArea, '这是获取的区')
			}

		},
		onReachBottom() {

			if (this.pageIndex * 10 <= this.total) {
				this.pageIndex++
				this.getitemlist('new', '')
			}



		}

	}
</script>

<style lang="scss">
	.zonghe {
		position: relative;

		.shows {
			width: 100rpx;
			position: absolute;
			display: inline-block;
			z-index: 1000;
			background: #fff;
			top: 40rpx;
			right: -20rpx;
		}
	}

	page {
		background-color: $uni-bg-color-grey;
		padding-top: 128rpx;
	}

	.swiperimg {
		width: 100%;

	}

	.hade {
		width: 100vw;
		height: 100rpx;
		line-height: 100rpx;
		background-color: $bg-color;
		color: #fff;
		padding: 40rpx 28rpx 0;
		position: fixed;
		top: 0;
		z-index: 1000;
	}

	.inputs {

		background-color: $bg-color;
		height: 70rpx;
		padding: 12rpx 20rpx;

		.input {
			background-color: rgba(255, 255, 255, 0.4);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			height: 60rpx;
			color: #fff;

			image {
				width: 36rpx;
				margin: 0 10rpx 0 20rpx;
			}

			font-size: 24rpx;
		}
	}

	.icons {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: flex-start;
		position: relative;
		top: -40rpx;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;

		.iconsall {
			image {
				width: 60rpx;
			}

			margin: 22rpx;
			text-align: center;
			font-size: 24rpx;
		}
	}

	.shaixuan {
		display: flex;
		padding: 0rpx 40rpx;
		justify-content: space-between;
		font-size: 28rpx;

		view {
			display: flex;
			justify-content: space-between;

			view {
				// margin: 10rpx;
				padding: 10rpx 20rpx;
			}

			.click {
				background-color: #fff;
				color: dodgerblue;
				font-weight: 500;
			}
		}
	}

	.item_list {
		padding: 20rpx;

		.list {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			.no_z {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 20rpx;

				image {
					width: 30rpx !important;
					height: 17px !important;
					margin-right: 8rpx !important;
				}
			}

			.renzheng {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: var(--baseSuccsess);
				font-size: 20rpx;

				image {
					width: 29rpx !important;
					height: 29rpx !important;
					margin-right: 8px !important;
				}
			}

			.ipone {
				position: absolute;
				right: 20rpx;
				top: 50%;
				margin-top: -60rpx;

				image {
					width: 60rpx !important;
					margin: 0 !important;
				}

			}

			.list_top {
				display: flex;
				justify-content: flex-start;
				padding-right: 80rpx;

				image {
					width: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.list_title {
					.title_name {
						font-size: 28rpx;
						font-weight: bold;
					}

					.title_dizhi {
						font-size: 24rpx;
						color: #333;
						margin-top: 18rpx;
						margin-left: 20rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}
				}
			}

			.list_bottom {
				.bottom_list {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					margin: 20rpx 0;

					.bottom_lists {
						margin-right: 12rpx;
						font-size: 25rpx;
						text-align: center;
						padding: 4rpx 10rpx;
						background-color: #F5F6FA;
					}

					.bottom_lists2 {
						width: 145rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.btn-bg {
						background-color: #E5F4FF;
						color: var(--base);
						font-weight: 600;
					}
				}

				.bottom_content {
					font-size: 22rpx;
					color: #333;
					font-weight: 700;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title_dizhi {
						font-size: 24rpx;
						color: #333;
						margin-top: 18rpx;
						margin-left: 20rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}
				}
			}





		}
	}

	.mengceng {
		position: fixed;
		background-color: rgba(0, 0, 0, .8);
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1001;

		button {
			margin: 0;
			padding: 0;
			text-align: left;
			line-height: normal;
			border-radius: 0;
			background: #fff;
		}

		button::after {
			border: 0;
		}

		.mengcengcontent {
			padding: 20rpx;
			// width: 86vw;/
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.alltitle {
				font-size: 36rpx;
				font-weight: 700;
			}


			position: absolute;
			background-color: #fff;
			// width: 100%;
			bottom: 0;

			.names {
				padding: 20rpx;
				margin: 20rpx 0;
				background-color: #5555ff;
				width: 90vw;
				border-radius: 20rpx;

				.titles {
					font-size: 36rpx;
					color: #fff;
				}

				.contents {
					width: 75%;
					font-size: 26rpx;
					color: #fff;
					margin-top: 20rpx;
				}
			}

		}
	}

	.popup_content {
		height: 400rpx;
		background-color: #fff;
	}

	.picker-view {
		width: 100%;
		height: 300rpx;

	}

	.select_type {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .4);

		.select_type_list {
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 36rpx 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.title {
				font-size: 36rpx;
				margin-bottom: 42rpx;
				padding: 0 20rpx;
				font-weight: 600;
			}

			.btn {
				padding: 0 20rpx;
				margin-bottom: 42rpx;

				.active {
					color: var(--base);
				}
			}

			.select_type_item {
				border-bottom: 1rpx solid #f7f7f7;
				line-height: 80rpx;
				text-align: center;
				color: #999;
			}

			.select_type_active {
				color: var(--base);
			}
		}
	}

	.seat {
		display: flex;
		justify-content: space-between;
	}

	.Add_btn {
		position: fixed;
		bottom: 170rpx; // 适配iphoneX的底部;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: var(--base);
		color: #fff;
		text-align: center;
		border-radius: 50%;
		padding: 12rpx;
		font-size: 24rpx;

		image {
			width: 46rpx;
			height: 46rpx;
		}
	}

	.typeselet {
		background-color: #eee;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		margin-left: 12rpx;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-top: 14rpx;
		}
	}

	.dat {
		font-weight: 500;
	}

	.blue {
		color: var(--base);
		margin-right: 10rpx;
	}
</style>
